<template>
  <nut-popup position="bottom" :visible="showSpecPopup" @update:visible="updateVisible" round>
    <view class="spec-popup">
      <view class="popup-header">
        <view class="goods-info">
          <image :src="goodsImages[0]" class="thumb"></image>
          <view class="info">
            <view class="price">¥{{ price }}</view>
            <view class="selected">已选：{{ selectedSpec }}</view>
          </view>
        </view>
        <text class="close" @tap="closePopup">×</text>
      </view>
      <view class="spec-list">
        <view class="spec-title">型号</view>
        <view class="spec-items">
          <text
            class="spec-item"
            :class="{ active: selectedSpec === item }"
            v-for="(item, index) in specs"
            :key="index"
            @tap="selectSpec(item)"
          >{{ item }}</text>
        </view>
      </view>
      <view class="popup-footer">
        <view class="quantity-section">
          <text class="quantity-label">购买数量</text>
          <view class="quantity-control">
            <text class="minus" :class="{ disabled: quantity <= 1 }" @tap="decreaseQuantity">-</text>
            <text class="number">{{ quantity }}</text>
            <text class="plus" @tap="increaseQuantity">+</text>
          </view>
        </view>
        <view class="inventory">库存1099890</view>
        <view class="action-buttons">
          <button class="cart-btn" @tap="addToCart">加入购物车</button>
          <button class="buy-btn" @tap="buyNow">立即购买</button>
        </view>
      </view>
    </view>
  </nut-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps<{
  goodsImages: string[],
  price: number,
  specs: string[],
  selectedSpec: string,
  showSpecPopup: boolean
}>();

const emit = defineEmits<{
  (e: 'update:showSpecPopup', value: boolean): void
  (e: 'select-spec', spec: string): void
  (e: 'add-to-cart'): void
  (e: 'buy-now'): void
}>();

const updateVisible = (value: boolean) => {
  emit('update:showSpecPopup', value);
};

const quantity = ref(1);

const closePopup = () => {
  emit('update:showSpecPopup', false);
};

const selectSpec = (spec: string) => {
  emit('select-spec', spec);
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const increaseQuantity = () => {
  quantity.value++;
};

const addToCart = () => {
  emit('add-to-cart');
  closePopup();
};

const buyNow = () => {
  emit('buy-now');
  closePopup();
};
</script>

<style lang="scss">
.spec-popup {
  padding: 30rpx;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40rpx;

    .goods-info {
      display: flex;
      
      .thumb {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }

      .info {
        .price {
          font-size: 36rpx;
          color: #ff0000;
          font-weight: bold;
        }

        .selected {
          font-size: 26rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }

    .close {
      font-size: 48rpx;
      color: #999;
      line-height: 1;
      padding: 10rpx;
    }
  }

  .spec-list {
    margin-bottom: 40rpx;

    .spec-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .spec-items {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .spec-item {
        padding: 16rpx 40rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        font-size: 26rpx;
        color: #333;

        &.active {
          color: #ff0000;
          background: #fff0f0;
        }
      }
    }
  }

  .popup-footer {
    .quantity-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .quantity-label {
        font-size: 28rpx;
        color: #333;
      }

      .quantity-control {
        display: flex;
        align-items: center;
        
        .minus, .plus {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f7f7f7;
          font-size: 32rpx;

          &.disabled {
            color: #ccc;
          }
        }

        .number {
          width: 80rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f7f7f7;
          margin: 0 2rpx;
          font-size: 28rpx;
        }
      }
    }

    .inventory {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 30rpx;
    }

    .action-buttons {
      display: flex;
      gap: 20rpx;

      button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        font-size: 28rpx;
        border: none;
      }

      .cart-btn {
        background: #fff0f0;
        color: #ff0000;
        margin-top: 0 !important;
      }

      .buy-btn {
        background: #ff0000;
        color: #fff;
        margin-top: 0 !important;
      }
    }
  }
}
</style>